<template>
<div style="position:relative;height:100%">
  <el-menu 
  :unique-opened="true"
    :default-active="activeIndex"
    background-color="#333" 
    class="el-menu-vertical-demo" 
    :collapse="isCollapse"
    text-color="#fff"
    active-text-color="yellow"
    style="padding-top:3vh width:200px;" 
    router
    @select="handleMenuSelect"
    >
    <el-menu-item index="/home" route="/home">
      <i class="el-icon-setting"></i>
      <span slot="title">工作平台</span>
    </el-menu-item>
    <el-submenu index="/customer">
      <template slot="title">
        <i class="el-icon-s-custom"></i>
        <span slot="title">用户管理</span>
      </template>
      <el-menu-item index="/user" route="/user">用户列表</el-menu-item>
      <el-menu-item index="/test" route="/test">测试</el-menu-item>
      <el-menu-item index="/time" route="/time">时间表</el-menu-item>
    </el-submenu>
    <el-submenu index="/center">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span slot="title">个人中心</span>
      </template>
      <el-menu-item index="/person" route="/person">用户列表</el-menu-item>
      <el-menu-item index="/limit" route="/limit">权限管理</el-menu-item>
    </el-submenu>
  </el-menu>
  <i class="arrow" :class="isCollapse?'el-icon-d-arrow-right':'el-icon-d-arrow-left'" @click="isCollapse=!isCollapse"></i>
</div>
</template>

<script>
import Bus from "../Bus.js"
export default {
  watch:{
    isCollapse(newVal){
      this.$emit('collapse',newVal);
    },
  },
  data() {
    return {
     activeIndex:'/home',
     isCollapse:false
    }
  },
  methods:{
    handleMenuSelect(index,indexPath){
      Bus.$emit('paths',{index,indexPath});
    }
  },
  mounted(){
    this.activeIndex=this.$route.meta.index;
  }
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse){
  width:200px;

}
.arrow{
  width:50px;
  height: 50px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  bottom: 100px;
  color: aliceblue;
  font-size: 40px;
}
</style>